<!DOCTYPE html>
<html lang="zh">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>五种常见html导航栏之五-二级菜单</title>
 <style>
  /* 公共css-开始 */
  body {background-color: #dedede; margin: 0;color: #333;min-height: 2000px;}
  ul {list-style: none;padding: 0;}
  a {text-decoration: none;color: #333;}
  h1,p { margin: 0;}
  .blank-section { height: 100px;width: 100px;}
  .white {color: #fff;}
  .relative {position: relative;}
  /* 公共css-结束 */
  /* 左logo-开始 */
  header {position: relative;}
  .bannerImg {width: 100%;display: block;}
  .container {width: 100%;height: 75px;position: fixed;top: 0;left: 0;z-index: 99;transition: background-color .5s ease;}
  .transBg {background-color: transparent;}
  .activeBg {background-color: #0000006e;}
  .topMenu {width: 1366px;margin: 0 auto;display: grid;grid-template-columns: 200px 1fr 200px;gap: 20px;place-content: center;height: 75px;}
  .topMenu a {color: #fff;}
  .topMenu .active {color: rgb(255 226 0);}
  .topMenu a:hover {color: rgb(255 226 0);font-weight: bolder;}
  .topMenu a:active {opacity: 0.7;font-weight: bold;}
  .topMenu .left img { width: 50px;height: 50px;border-radius: 5px;}
  .topMenu .middle .menu-list {display: grid;grid-template-columns: repeat(4, 120px);place-items: center;}
  .topMenu .right .login-list {display: grid;grid-template-columns: 1fr 20px 1fr;place-items: center;}
  /* 二级菜单 */
  .menu-list>li {display: inline-block;margin-right: 20px;}
  /* 二级菜单样式 */
  .submenu {list-style-type: none;padding: 0;display: none;position: absolute;background-color: #fff;box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);min-width: 120px;left: -25px;top: 24px;}
  .submenu li {padding: 12px 16px;text-align: center;}
  .submenu li a {color: #000;text-decoration: none;display: block;}
  .menu-list>li:hover .submenu {display: block;}
  /* 左logo-结束 */
 </style>
</head>

<body>
 <header>
  <img class="bannerImg" src="https://pic.imgdb.cn/item/65904f34c458853aef534f22.jpg" alt="首页banner图片">
  <div class="container" id="navbar">
   <div class="topMenu">
    <div class="left">
     <img src="https://pic.imgdb.cn/item/65904693c458853aef2079a1.png" alt="网站logo-松蕴大胖">
    </div>
    <div class="middle">
     <ul class="menu-list">
      <li><a class="active" href="#">首页</a></li>
      <li class="relative">
       <a href="#">新闻中心</a>
       <!-- 二级菜单 -->
       <ul class="submenu"><li><a href="#">公司动态</a></li><li><a href="#">产品服务</a></li><li><a href="#">公司图册</a></li><li><a href="#">成功案例</a></li></ul>
      </li>
      <li><a href="#">服务项目</a></li>
      <li><a href="#">关于我们</a></li>
     </ul>
    </div>
    <div class="right">
     <ul class="login-list">
      <li><a href="#">登录</a></li>
      <li class="white">|</li>
      <li><a href="#">注册</a></li>
     </ul>
    </div>
   </div>
  </div>
 </header>
</body>
<script>
 window.addEventListener('scroll', function () {
  var navbar = document.getElementById('navbar');
  if (window.scrollY > 50) { // 假设滚动超过50px时改变背景色
   navbar.classList.add('activeBg');
   navbar.classList.remove('transBg');
  } else {
   navbar.classList.add('transBg');
   navbar.classList.remove('activeBg');
  }
 });
</script>
</html>